<template>
  <view class="yh-page">
	<view class="page">
		<view class="uni-column">
			<view class="yh-title">先执行登录,在登录状态下测试</view>
		</view>
		<view class="uni-form-item uni-column">
			<view class="title"><text class="red">*</text>用户id</view>
			<view class="uni-input-wrapper">
				<input class="uni-input" name="user_id" v-model="user_id" placeholder="请输入用户id"  @input="inputClearUserIdInput" />
				<text class="uni-icon" v-if="showClearUserIdIcon" @tap="handleToClearUserIdIcon">&#xe434;</text>
			</view>
			<button type="primary" @tap="handleToLoginByUserId()">执行登录</button>
		</view>
		<br/>
		<view class="uni-column">
			<view class="yh-title">测试单图上传</view>
		</view>
		<view class="uni-form-item uni-column">
			<image  class="image" v-if="singleImageUrl" :src="singleImageUrl" @error="imageError"/>
			<br />
			<button  type="primary" @tap="handleUploadSinglePicture()">单图上传</button>
		</view>
		<br/>
		<view class="uni-column">
			<view class="yh-title">测试多图上传</view>
		</view>
		<view class="uni-form-item uni-column">
			<view class="image-column">
				<image  class="image" v-if="imagesArray.length" v-for="(item,index) in imagesArray" :key="index" :src="item" @error="imageError"/>
			</view>
			<br />
			<button  type="primary" @tap="handleUploadMultiplePicture()">多图上传</button>
		</view>
	</view>
  </view>
</template>

<script>
import { loginByUserId }  from '@/api/test/login/wechat-login.js'
import { validNumber } from '@/utils/validate'
import { chooseImage,previewImage } from '@/utils/images'
import { singleUploadPicture , multipleUploadPicture} from '@/api/test/upload/picture.js'
import store from '@/store';

export default 
{
  //计算属性
  computed:
  {

  },
  //监听
  watch:
  {

  },
  data() 
  {
    return{
		user_id:null,
		//控制是否显示清除user_id的图标
		showClearUserIdIcon:false,
		//单图url
		singleImageUrl:'',
		//多图image的url
		imagesArray:[],
    };
  },
  //页面加载
  onLoad() 
  {

  },
  //页面显示
  onShow() 
  {

  },
  //页面初次渲染完成
  onReady()
  {

  },
  //页面隐藏
  onHide()
  {

  },
  //页面卸载
  onUnload()
  {

  },
  methods:
  {
	//监听是否清除用户图标
	inputClearUserIdInput()
	{
	    if (this.user_id.length > 0) 
		{
	        this.showClearUserIdIcon = true;
	    } 
		else 
		{
	        this.showClearUserIdIcon = false;
	    }
	},
	//点击清除用户id
	handleToClearUserIdIcon() 
	{
	    this.inputUserId = null;
		this.user_id = null;
	    this.showClearUserIdIcon = false;
	},
	//用户id登录
	async handleToLoginByUserId()
	{
		let validatedNumber =  validNumber(this.user_id)
		
		if(!validatedNumber)
		{
			uni.showToast({
				image: "/static/test/notice/04-error.png",
				title: "必须是数字",
				mask:true,
				duration:2000
			})
			
			return 
		}
		
		let _this = this
		let param = {}
		param['user_id'] = this.user_id
		const result = await loginByUserId(param).then(res=>
		{
			return new Promise((resolve,reject)=>{
				if(res && res.code == 0)
				{
					
					resolve(res.data)
				}
			})
		})
		const {token,openid} = result
		
		if(token)
		{
			_this.$store.dispatch('user/loginSaveToken',token)
			
			if(openid)
			{
				_this.$store.dispatch('user/authSaveOpenid',openid)
			}
		}
		
	},
	//图片错误
	imageError: function(e) {
	    console.error('image发生error事件，携带值为' + e.detail.errMsg)
	},
	//单图上传
	async handleUploadSinglePicture()
	{
		console.log('开始上传');
		
		let param = {count:1}
		const result = await chooseImage(param)
		this.singleImageUrl = result.tempFilePaths[0]
		console.log(result)
		const uploadResult = await singleUploadPicture( result.tempFilePaths[0])
		console.log(uploadResult)
		
		if(uploadResult && uploadResult.code === 0)
		{
			uni.showToast({
				image: "/static/test/notice/01-success.png",
				title: "上传成功",
				mask:true,
				duration:2000
			})
		}
		const {pictureId} =  uploadResult
		console.log(pictureId) 
	},
	//多图上传
	async handleUploadMultiplePicture()
	{
		let param = {count:3}
		const result = await chooseImage(param)
		this.imagesArray = result.tempFilePaths
		const {pictureIdArray,pictureArray} = await multipleUploadPicture(result.tempFilePaths)
		console.log(pictureIdArray)
		console.log(pictureArray) 	
		
		if(pictureIdArray.length > 0)
		{
			uni.showToast({
				image: "/static/test/notice/01-success.png",
				title: "上传成功",
				mask:true,
				duration:2000
			})
		}
	}
  }

}
</script>

<style lang="scss" scoped>
.page{
	width:calc(100% - 70rpx);
	padding:35rpx;
}
.title {
        padding: 5rpx 13rpx;
    }

.uni-input-wrapper {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	flex-wrap: nowrap;
	background-color: #FFFFFF;
}

.uni-input {
	height: 80rpx;
	line-height: 80rpx;
	font-size: 36rpx;
	padding: 0rpx;
	flex: 1;
	background-color: #FFFFFF;
}

.uni-icon {
	font-family: uniicons;
	font-size: 80rpx;
	font-weight: normal;
	font-style: normal;
	width: 80rpx;
	height: 80rpx;
	line-height: 80rpx;
	color: #999999;
}

.red{
	color:red;
	font-weight: true;
}

.image
{
	width:200rpx;
	height:200rpx;
	margin:10rpx;
}
.image-column{
	display: flex;
	flex-direction: row;
	flex-wrap: auto;
}
</style>
